<template>
<div style="width: 100%">
      <div>
        <el-row style="background: white;">
          <el-col :span="24">
            <div class="tbUpDiv">
              <div style="display: flex;">
                <img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg">
                <span class="tbUpPost">编制管理</span>
              </div>
              </div>
          </el-col>
        </el-row>
      </div>
  <el-row>
    <el-col>
      <div style="display: flex">
        <div style="width: 16%;border-right: 1px solid gainsboro">
          <div style="text-align: center;padding:15px 30px;border-bottom:1px solid gainsboro;">组织架构</div>
          <div style="padding: 20px 10px 0px 10px">
<!--            <el-input-->
<!--                v-model="input2"-->
<!--                class="w-50 m-2"-->
<!--                :suffix-icon="Search"-->
<!--            />-->
            <el-input v-model="filterText" placeholder="请输入" />
            <el-tree
                ref="treeRef"
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
            />
          </div>
        </div>
        <div style="width: 84%;">
              <el-row  style="display: flex;justify-content: space-around;margin-top: 10px">
                  <el-col :span="11">
                    <el-card shadow="hover">
                      <div>岗位编制人数</div>
                      <div><span>{{d.brs}}</span></div>
                    </el-card>
                  </el-col>
                <el-col :span="11">
                  <el-card shadow="hover">
                    <div>岗位实际人数</div>
                    <div><span>{{d.srs}}</span></div>
                  </el-card>
                </el-col>
              </el-row>
          <br>
              <el-row>
                <el-col>
                  <el-table :data="d.tableData" style="width: 100%">
                    <el-table-column align='center' prop="department.departmentName" label="部门" width="180">

                    </el-table-column>
                    <el-table-column align='center'  prop="jobdemandName" label="岗位名称" width="180" />
                    <el-table-column align='center' prop="jobrecordBnumber" label="编制人数" width="180" />
                    <el-table-column align='center' prop="jobrecordSnumber" label="实际人数" width="180" />
                    <el-table-column align='center' prop="jobrecordSalary" label="预算工资" width="180" />
                    <el-table-column align='center' prop="jobrecordSteta" label="状态" width="180">
                        <!-- 0 缺编  1 超编  2满编-->
                      <template #default="s">
                        <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobrecordSteta==0">缺编</div>
                        <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobrecordSteta==1">超编</div>
                        <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.jobrecordSteta==2">满编</div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
          <el-row justify="center">
            <el-col>
              <el-pagination
                  v-model:currentPage="d.pageNo"
                  v-model:page-size="d.pageSize"
                  :page-sizes="[5,10, 20, 30, 40]"
                  small="small"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="d.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"/>
            </el-col>
          </el-row>
        </div>
      </div>
     </el-col>
  </el-row>
</div>
</template>

<script lang="ts" setup>
import {onBeforeMount, onMounted, reactive, ref, toRefs, watch} from "vue";
import { ElTree } from 'element-plus'
import {Search} from "@element-plus/icons-vue"
import axios from "axios";
//表格
const d = reactive({
  //岗位表数据
  tableData:[],
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //接收表格的编制人数
  brs:0,
  //接收表格的实际人数
  srs:0,
  //调用部门信息部门数组
  typeDate:[],
  //两表中和数据
  type2Date:[],
});
//左边人员树形结构
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
//组织架构搜索框
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
//配置树形控件
const defaultProps = {
  children: 'children',
  label:'label',
}
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}
const data: Tree[] = [
  {
    id: 4,
    label: '摆烂公司',
    children: [
      {
        id: 1,
        label: '董事会',
      },
      {
        id: 2,
        label: '人事部',
      },
      {
        id: 5,
        label: '后勤部门',
      },
      {
        id: 4,
        label: '财务部门',
      },
    ],
  }
]
//树形点击方法
// const handleNodeClick = (data:Tree) => {
//  console.log(data.id)
//   if(data.id==0){
//     getDate();
//   }else {
//   axios.post("http://localhost:1688/jobre/selectDept/"+data.id).then((res)=>{
//     var data=res.data.data
//     ALltableData.value = data;//放入表格
//     d.total = res.data.data.length;//获得它的长度
//     getTabelData();//调用方法
//     d.brs=0
//     d.srs=0
//     for (let datum of res.data.data) {
//       d.brs +=datum.jobrecordBnumber;
//       d.srs +=datum.jobrecordSnumber;
//     }
//   })
//   }
// }

const ALltableData=ref([])
const getDate =async function (){
  await axios.get("http://localhost:1688/departmentDubboC/cde").then((res)=>{
    var data=res.data.data
    //循环查询部门id对应的部门

    d.total = res.data.data.length;//获得它的长度
    ALltableData.value= data;//放入表格\
    getTabelData()
    console.log(ALltableData.value)
    for (let datum of res.data.data) {
      d.brs +=datum.jobrecordBnumber;
      d.srs +=datum.jobrecordSnumber;
    }
  })
}
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData=shu;
}
//
const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}

// 查询所有部门
const Dept = () => {
  axios.get("http://localhost:9883/department_con/alldepartments").then((res)=>{
    d.typeDate=res.data.data
    console.log(d.typeDate)
  })
}

onBeforeMount(function () {
  getDate()
})
// const {total,pageNo,pageSize,tableData,list} = toRefs(d);
</script>
<style scoped>
.tbUpDiv{

  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tbImg{
  margin-left: 20px;
}
.tbUpPost{
  margin-left: 10px;
  display: flex;
  align-items: center;
}
</style>